<link rel="stylesheet" href="css/userSetting.css" />
<div class="userSetting am-g am-g-fixed" ms-controller="userSetting">
	<div class="am-u-sm-5">
  		<ul class="tabsUl">
			<li ms-class="active : currentTabId == 'personalInformation'" data-id='personalInformation' ms-click='changeTab'>个人资料</li>
			<li ms-class="active : currentTabId == 'changePassword'" data-id='changePassword' ms-click='changeTab'>修改密码</li>
			<li ms-class="active : currentTabId == 'modifyPhoneNum'" data-id='modifyPhoneNum' ms-click='changeTab'>修改手机号</li>
		</ul>
	</div>
	
	<!--右侧具体内容-->
	<div class="am-u-sm-7 rightContent">
		<!--左侧小指针-->
		<div class="pointer" ms-css-padding-top='pointerMarginTop'>
			<div>
				<span class="am-icon-caret-left"></span>
			</div>
		</div>
		
		<!--具体内容-->
		<div class='content'>
			<h3>{{title}}</h3>
			<div class="personalInfoArea" ms-visible="currentTabId == 'personalInformation'">
				<div>
					<img class="am-circle head" src="http://img4q.duitang.com/uploads/item/201505/06/20150506223203_5hiU2.jpeg"/>
					<div class="pencil am-circle">
						<span class="am-icon-pencil"></span>
					</div>
					<span>点击上传头像</span>
				</div>
				<form class="am-form am-form-horizontal">
			  		<div class="am-form-group">
			    		<label class="am-u-sm-2 am-form-label">姓名:</label>
			    		<div class="am-u-sm-10">
			      			<input type="text" placeholder="输入你的用户名" value="陈龙龙">
			    			<p class="prompt">最多20个字符，字母。汉字，数字或下划线</p>
			    		</div>
			  		</div>
					<div class="am-form-group">
			    		<label class="am-u-sm-2 am-form-label">性别:</label>
			    		<div class="am-u-sm-10">
			    			<label class="radioLB am-radio-inline">
        						<input type="radio"  value="" name="sex" checked="true"> : 男
      						</label>
      						<label class="radioLB am-radio-inline">
        						<input type="radio" name="sex"> : 女
      						</label>
			    		</div>
			  		</div>
			  		<div class="am-form-group">
			    		<label class="am-u-sm-2 am-form-label">学科:</label>
			    		<div class="am-u-sm-10">
			    			<label class="am-form-label">数学</label>
			    		</div>
			  		</div>
					<div class="am-form-group">
			    		<div class="am-u-sm-10 am-u-sm-offset-2">
			      			<button type="submit" class="am-btn">保存</button>
			    		</div>
			  		</div>
				</form>
			</div>
			<div class="changePasswordArea" ms-visible="currentTabId == 'changePassword'">
				<form class="am-form am-form-horizontal">
			  		<div class="am-form-group">
			    		<label class="am-u-sm-3 am-form-label">当前密码:</label>
			    		<div class="am-u-sm-9">
			      			<input type="password">
			    		</div>
			  		</div>
			  		
			  		<div class="am-form-group">
			    		<label class="am-u-sm-3 am-form-label">新密码:</label>
			    		<div class="am-u-sm-9">
			      			<input type="password">
			    			<p class="prompt">密码为6-16位的字母，数字或下划线组成，区分大小写</p>
			    		</div>
			  		</div>
			  		
			  		<div class="am-form-group">
			    		<label class="am-u-sm-3 am-form-label">确认新密码:</label>
			    		<div class="am-u-sm-9">
			      			<input type="password">
			    		</div>
			  		</div>
					<div class="am-form-group">
			    		<div class="am-u-sm-8 am-u-sm-offset-4">
			      			<button type="submit" class="am-btn">保存</button>
			    		</div>
			  		</div>
				</form>
			</div>
			<div class="modifyPhoneNumArea" ms-visible="currentTabId == 'modifyPhoneNum'">
				<div class="tabs">
					<div class="item" ms-class='active : currentSetNumberTab == "authenticate"' data-id="authenticate">验证身份</div>
					<div class="item" ms-class='active : currentSetNumberTab == "setNewNumber"' data-id="setNewNumber">设置新手机号</div>
					<div class="item" ms-class='active : currentSetNumberTab == "setNumberSuccess"'data-id="setNumberSuccess">设置成功</div>
				</div>
				<div class="tabsContent">
					<form class="am-form am-form-horizontal" ms-visible = "currentSetNumberTab == 'authenticate'">
				  		<div class="am-form-group">
				    		<label class="am-u-sm-4 am-form-label">当前手机号:</label>
				    		<div class="am-u-sm-8">
				      			<label class="am-u-sm-3 am-form-label">15986549648</label>
				    		</div>
				  		</div>
				  		<div class="am-form-group">
				    		<label class="am-u-sm-4 am-form-label">输入登录密码:</label>
				    		<div class="am-u-sm-8">
				      			<input type="password">
				    			<p class="prompt">为了保障您的账户安全，我们需要验证您的身份（请输入登陆密码）</p>
				    		</div>
				  		</div>
						<div class="am-form-group">
				    		<div class="am-u-sm-8 am-u-sm-offset-4">
				      			<button class="am-btn" ms-click='nextStep(1)'>下一步</button>
				    		</div>
				  		</div>
					</form>
					
					<form class="am-form am-form-horizontal" ms-visible = "currentSetNumberTab == 'setNewNumber'">
						<div class="am-form-group">
				    		<label class="am-u-sm-4 am-form-label">更改登录手机号:</label>
				    		<div class="am-u-sm-8">
				      			<input type="tel">
				    		</div>
				  		</div>
				  		<div class="am-form-group">
				    		<label class="am-u-sm-4 am-form-label">短信验证码:</label>
				    		<div class="am-u-sm-8">
				      			<input type="tel">
				      			<button class="am-btn messageBt">获取短信验证码</button>
				    			<p class="prompt">60秒后未收到消息，请再次发送</p>
				    		</div>
				  		</div>
				  		<div class="am-form-group">
				    		<div class="am-u-sm-8 am-u-sm-offset-4">
				      			<button class="am-btn" ms-click='nextStep(2)'>下一步</button>
				    		</div>
				  		</div>
					</form>
					
					<div class="setNumSuccess" ms-visible = "currentSetNumberTab == 'setNumberSuccess'">
						设置成功，您的新登录用户名为133****1270
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/userSetting.js"></script>